import classnames from 'classnames';
import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { useHistory } from 'react-router-dom';
import { Image } from 'antd-mobile';

export default function ArticleItem(props: any) {
  const { article } = props;
  //   console.log(article);
  const history = useHistory();
  let type = article.cover.type;

  return (
    <div
      className={styles.root}
      onClick={() =>
        history.push('/article' + article.art_id, { id: article.art_id })
      }
    >
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {article.cover.images.map((item: string, index: number) => (
              <div className="article-img-wrapper" key={index}>
                <Image src={item} lazy></Image>
                {/* <img src={item} alt="" /> */}
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        <span>{article.pubdate}</span>

        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  );
}
